@import '@/less/common.less';

.recipe-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;

  .m-left {
    width: 40%;
    height: 200px;
    flex: 0 0 auto;
    position: relative;
    .radius();
    overflow: hidden;

    .num {
      position: absolute;
      top: 0;
      left: -5px;
      width: 60px;
      height: 35px;
      font-weight: bold;
      text-align: center;
      font-style: italic;
      font-size: 20px;
      line-height: 35px;
      color: #ffffff;
      border-radius: 0 0 10px 0;
      background-image: linear-gradient(#767c90, #788598);
    }

    .first {
      background-image: linear-gradient(#faf683, #fdc03c);
    }

    .second {
      background-image: linear-gradient(#bcefec, #9bbfe3);
    }

    .third {
      background-image: linear-gradient(#fbe2da, #efa092);
    }

    Image {
      width: 100%;
      height: 100%;
    }
  }

  .m-right {
    flex: 1 1;
    height: 200px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      Text {
        .omit-two();
        color: #333333;
        font-size: 30px;
        font-weight: 600;
      }
    }

    .desc {
      font-size: 20px;
      color: #666666;

      .material,
      .date,
      .username {
        margin-top: 10px;
        display: flex;
        align-items: center;

        Image {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          margin-right: 10px;
          flex-shrink: 0;
        }

        Text {
          max-width: 80%;
          .omit();
        }
      }

      .thumb-score {
        .flex();
        margin-top: 10px;

        Text {
          &:nth-child(1) {
            max-width: 60%;
            .omit();
          }

          &:nth-child(2) {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
